!!! 5
%html
  %head
    %title= "SILW"
    %meta{ :"http-equiv" => "content-type", :content => "text/html; charset=UTF-8" }
    %meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }
    %link{ :href => "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css",
      :media => "screen", :rel => "stylesheet", :type => "text/css" }
  %body
    .container-fluid
      %header
        %h2
          %a{:href => '/'} SILW
        %p.muted
          Various system metrics frequently aggregated from multiple remote instances.
        %p
          autorefresh on/off
          %button#button.btn.btn-mini
            %a#refresh-switch(href="#")
              %i.icon-stop
      = yield

      %footer
        %p        

    %script{ :type => 'text/javascript', :src => "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" }
    %script{ :type => 'text/javascript', :src => "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js" }
    :javascript
      $(document).ready(function () {
        var interval = 10;   //number of seconds before page refresh
        var refresh = function() {
          setTimeout(function() {
            if( $("#refresh-switch > i").attr("class").match(/^icon-(.*)$/)[1] === "stop"){
              location.reload(true);
              $("#refresh-switch > i").attr("class", "icon-stop");
            }
           }, interval * 1000);
        };

        $("#button").click(function(e) {
          if( $("#refresh-switch > i").attr("class").match(/^icon-(.*)$/)[1] === "stop"){
            $("#refresh-switch > i").attr("class", "icon-play");
            clearInterval(refresh);
          }else{
            location.reload(true);
          }
        });

        refresh();
      });
